<template>
  <div class="un-financial">
    <TitleLable label="综合投后分析" sub-label="（非财务类指标）">
      <template #right>
        <div class="underline" @click="goTo">参/控股公司项目卡</div>
      </template>
    </TitleLable>
    <div class="nav-list">
      <Tabs :list="navList" :current="current" @change="change" />
    </div>
    <div class="table-box">
      <el-row class="body" v-for="(item, index) in data" :key="index">
        <el-col :span="12">
          <div>{{ item.name }}</div>
        </el-col>
        <el-col :span="12">
          <div v-if="index !== 4">
            <span class="blue">{{ item.value }}</span> {{ item.unit }}
          </div>
          <div v-else class="blue pointer" @click="goTo">点击查看详情</div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import TitleLable from "../TitleLable/index.vue";
import Tabs from "../Tabs/index.vue";
export default {
  name: "UnFinancial",
  components: { TitleLable, Tabs },
  data() {
    return {
      current: 1,
      navList: ["浙商工服", "交投智科", "参股公司"],
      data: [
        { name: "盾构机保有量", value: 21, unit: "台" },
        { name: "盾构机下线数", value: 21, unit: "台" },
        { name: "盾构机运行数", value: 11, unit: "台" },
        { name: "盾构机闲置率", value: 52.3, unit: "%" },
        { name: "盾构机生产管理台账", value: 0 },
      ],
    };
  },
  methods: {
    change(val) {
      this.current = val;
    },
    handleListDetail() {
      console.log("handleListDetail");
    },
    goTo() {
      this.$message("进入平台：运营管理/企业数据/企业分析");
    },
  },
};
</script>

<style lang="scss" scoped>
.un-financial {
  height: 313px;
  .nav-list {
    display: flex;
    flex-direction: row-reverse;
    margin: 12px 20px;
  }
  .table-box .body {
    &:nth-child(odd) {
      background: #1b3661;
    }
    &:nth-child(even) {
      background: transparent;
    }
  }
}
</style>
